<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>游戏面板</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f8f8f8;
        }
        
        .game-board {
            display: grid;
            grid-template-columns: repeat(8, 50px);
            gap: 5px;
            margin: 20px auto;
            width: fit-content;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .tile {
            width: 50px;
            height: 50px;
            background-size: cover;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 5px;
        }
        
        #restart-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }
        
        #restart-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>简单消除游戏</h1>
    <div id="game-board" class="game-board"></div>
    <button id="restart-button">重新开始</button>
    
    <script>
        const gameBoard = document.getElementById('game-board');
        const restartButton = document.getElementById('restart-button');
        const boardSize = 8;
        const tileTypes = [
            'red', 'blue', 'green', 'yellow', 'purple'
        ];
        let board = [];

        function createBoard() {
            gameBoard.innerHTML = '';
            board = [];

            for (let i = 0; i < boardSize * boardSize; i++) {
                const tile = document.createElement('div');
                tile.classList.add('tile');
                tile.style.backgroundColor = tileTypes[Math.floor(Math.random() * tileTypes.length)];
                tile.addEventListener('click', () => swapTiles(i));
                gameBoard.appendChild(tile);
                board.push(tile);
            }
        }

        function swapTiles(index) {
            console.log('Tile clicked:', index);
            // 这里可以添加交换逻辑
        }

        function restartGame() {
            createBoard();
        }

        restartButton.addEventListener('click', restartGame);

        createBoard();
    </script>
</body>
</html>
